<template>
  <div>
    <Modal v-model="topUpPop" width="30" :closable="false" :mask-closable="false" class-name="vertical-center-modal">
      <div slot="header" class="head-sty">
        <div class="title">{{$t('user.recharge')}}</div>
        <Icon type="md-close" class="close" @click="closeMet()" />
      </div>
      <div class="content-sty">
        <div class="label-text">{{ $t('user.rechargeAmountCNY') }}</div>
        <Input v-model="topUpForm.amount" :placeholder="$t('user.rechargeAmountCNY')" maxlength="9"
          @on-change="convertInput">
        <template #append>
          <span>{{ userCurrency.code == 'CNY' ? '' : '≈' }} {{ topUpForm.dollar }}（{{ userCurrency.code }}）</span>
        </template>
        </Input>
      </div>
      <div slot="footer" class="handle-sty">
        <div class="left">
          <!-- <span class="col-text" @click="enterShow()">{{ $t('pay.enter_bank_btn') }} </span>
          <span class="text">{{ $t('pay.bank_sub_pay_tit') }}</span> -->
        </div>
        <div class="right">
          <Button class="cancel-btn" @click="closeMet()">{{ $t('user.cancel') }}</Button>
          <Button type="primary" class="save-btn" @click="confirmMet()">{{$t('user.recharge')}}</Button>
        </div>
      </div>
    </Modal>
    <!-- 充值没有收货地址弹框显示 -->
    <Modal v-model="rechargePop" width="30" :closable="false" :mask-closable="false" class-name="vertical-center-modal">
      <div slot="header" class="head-sty">
        <div></div>
        <Icon type="md-close" class="close" @click="handleCancel()" />
      </div>
      <div class="content-sty">
        <div class="notice-text">{{ resultVal }}</div>
      </div>
      <div slot="footer" class="handle-sty">
        <Button class="cancel-btn" @click="handleCancel()">{{$t('user.cancel')}}</Button>
        <Button type="primary" class="save-btn" @click="handleOk()">{{$t('personal.Search-confirm')}}</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { debounce } from "@/common/common";
import { recharge, convert } from "@/api/user";
export default {
  data() {
    return {
      topUpPop: false,
      rechargePop: false,
      resultVal: '',
      topUpForm: {
        dollar: ''
      }
    }
  },
  computed: {
    ...mapState({
      userCurrency: state => state.user.userCurrency,
      userInfo: state => state.user.userInfo
    })
  },
  methods: {
    open() {
      this.topUpPop = true;
    },
    closeMet() {
      this.topUpPop = false;
      this.topUpForm = {
        dollar: ''
      };
    },
    convertInput: debounce(function () {
      this.topUpForm.amount = this.topUpForm.amount.replace(/[^0-9.]/g, '');//校验是否是数字
      this.checkLength();
      if (this.topUpForm.amount) {
        convert({ amount: this.topUpForm.amount, currencyCode: this.userCurrency.code }).then((res) => {
          this.topUpForm.dollar = res.result.calculateOrderAmount;
        })
      } else {
        this.topUpForm.dollar = '';
      }
    }, 1000),
    checkLength() {
      const maxLength = 9;
      if (this.topUpForm.amount.length > maxLength) {
        this.topUpForm.amount = this.topUpForm.amount.slice(0, maxLength);
        this.$Message.error(this.$t('pay.greaterThan'));
        return;
      }
    },
    confirmMet() {
      // 这段代码是弹框的显示，暂时隐藏，不要删除，后续会用到
      // if (this.userInfo.orderFlag == 'DISABLE') {
      //   this.$refs.notice.init();
      //   return
      // }
      if (!this.topUpForm.amount) {
        this.$Message.error(this.$t('pay.RechargeAmount'));
        return
      }
      if (this.topUpForm.amount < this.topUpForm.highestAmount) {
        this.$Message.error(this.$t('pay.minimum', { highestAmount: this.topUpForm.highestAmount }));
        return
      }
      recharge(this.topUpForm.amount).then((res) => {
        if (res.code == 1002) {
          this.rechargePop = true;
          this.resultVal = res.message;
        } else {
          this.closeMet();
          let type = "recharge";
          this.$router.push(`/pay?id=${res.result}&type=${type}&&markText=recharge`);
        }
      })
    },
    handleCancel() {
      this.rechargePop = false;
      this.resultVal = '';
    },
    handleOk() {
      this.rechargePop = false;
      this.resultVal = '';
      this.$router.push('/user/setting')
    },
    // 汇款充值
    enterShow() {
      this.topUpPop = false;
      this.$router.push('/bankRemittance');
    }
  }
}
</script>

<style lang="less" scoped>
:deep(.ivu-modal-header) {
  border: none;
  padding: 32px 32px;
}

:deep(.ivu-modal-body) {
  padding: 8px 32px;
}

:deep(.ivu-modal-footer) {
  border: none;
  padding: 32px;
}

.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;

  .head-sty {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      font-weight: 600;
      font-size: 24px;
      color: #1E1714;
      line-height: 28px;
    }

    .close {
      color: #1E1714;
      font-size: 36px;
      font-weight: 500;
      cursor: pointer;
    }
  }

  .content-sty {
    .label-text {
      font-weight: 600;
      font-size: 20px;
      color: #1E1714;
      line-height: 23px;
      margin-bottom: 20px;
    }

    .notice-text {
      font-weight: 500;
      font-size: 18px;
      color: #1E1714;
      line-height: 21px;
    }

    :deep(.ivu-input-group) {
      .ivu-input {
        height: 54px;
      }

      .ivu-input-group-append {
        height: 54px;
        font-weight: 600;
        font-size: 20px;
        color: #1E1714;
        line-height: 26px;
      }
    }
  }

  .handle-sty {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      width: 260px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 16px;
      line-height: 19px;
      text-align: left;

      .col-text {
        color: #FF186B;
        cursor: pointer;
      }

      .text {
        color: #767B93;
      }
    }

    .right {
      // display: flex;
      // justify-content: end;
      // align-items: center;
      // gap: 24px;

      .save-btn {
        min-width: 112px;
        height: 46px;
        background-color: #FF186B;
        font-weight: 600;
        font-size: 16px;
        color: #FFFFFF;
        line-height: 19px;
      }

      .cancel-btn {
        min-width: 112px;
        height: 46px;
        font-weight: 600;
        font-size: 16px;
        color: #1E1714;
        line-height: 19px;
      }

      .cancel-btn:hover {
        border-color: #e3e5e8;
      }

      .cancel-btn:focus {
        box-shadow: 0 0 0 1px #e3e5e846;
      }
    }
  }
}
</style>
